<template>
	<div>
		<el-container style="margin-top: 10px;">
			<el-header>
				<el-form :inline="true">
					<el-form-item>
						<el-select v-model="sort" placeholder="请选择" size="mini">
							<el-option value="降序">降序</el-option>
							<el-option value="升序">升序</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-input placeholder="输入图片名称" v-model="keyword" size="mini"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="success" size="mini" @click="getImageClass">搜索</el-button>
					</el-form-item>
				</el-form>
				<el-form :inline="true">
					<el-form-item>
						<el-button type="warning" size="mini" v-show="ids.length>0" @click="ids=[]">取消选中</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="danger" size="mini" v-show="ids.length>0" @click="selectRemove">批量删除</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="success" size="mini" @click="imageBox = true">创建相册</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="warning" size="mini" @click="uploadBox = true">上传图片</el-button>
					</el-form-item>
				</el-form>
			</el-header>
			<el-container>
				<el-aside width="200px">
					<el-menu default-active="0" class="el-menu-vertical-demo">
						<el-menu-item class="menuMsg" :index="index.toString()" @click="changeLeft(item.id)" v-for="(item,index) in classList" :key="index">
							<div><span slot="title">{{item.name}}</span></div>
							<el-dropdown @command="handleCommand">
								<span class="el-dropdown-link">
									{{item.images_count}}<i class="el-icon-arrow-down el-icon--right"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item :command="{type:'edit', obj:item}">修改</el-dropdown-item>
									<el-dropdown-item :command="{type:'del', id:item.id}">删除</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</el-menu-item>
						<el-menu-item class="asidePage">
							<!-- 分页器区域 -->
							<el-button size="mini">上一页</el-button>
							<el-button size="mini">下一页</el-button>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<el-container>
					<el-main>
						<el-row class="rowBox" :gutter="20">
						  <el-col :span="4" v-for="(item,index) in imageList" :key="index" style="padding-bottom: 10px;">
						    <el-card class="checkCart" :body-style="{ padding: '0px' }" shadow="hover">
							  <input class="checkBox" type="checkbox" v-model="ids" :value="item.id"></input>
						      <el-image :src="item.url" class="image" :preview-src-list="[item.url]" ></el-image>
							  <div class="imageName">{{item.name}}</div>
						      <div style="padding: 14px;">
						        <div class="bottom clearfix">
									<el-button-group>
									  <el-button class="btnGroup" size="mini" icon="el-icon-view" @click="maxImageBox = true"></el-button>
									  <el-button class="btnGroup" size="mini" icon="el-icon-edit" @click="editImg(item)"></el-button>
									  <el-button class="btnGroup" size="mini" icon="el-icon-delete" @click="removeImg(item.id)"></el-button>
									</el-button-group>
						        </div>
						      </div>
						    </el-card>
						  </el-col>
						</el-row>
					</el-main>
					<el-footer>
						<!-- 分页器区域 -->
						<el-pagination
							@size-change="changeSize"
							@current-change="changePage"
							:current-page="page"
							:page-sizes="[3, 6, 9, 12]"
							:page-size="limit"
							layout="total, sizes, prev, pager, next, jumper"
							:total="totals">
						</el-pagination>
					</el-footer>
				</el-container>
			</el-container>
		</el-container>
		
		<!-- 创建相册的弹框 -->
		<el-dialog title="创建相册" :visible.sync="imageBox">
		  <el-form :model="photo">
		    <el-form-item label="相册名称" :label-width="`80px`">
		      <el-input v-model="photo.name" placeholder="请输入相册名称"></el-input>
		    </el-form-item>
			<el-form-item label="相册排序" :label-width="`80px`">
			  <el-input-number v-model="photo.order" :min="1" :max="10" label="描述文字"></el-input-number>
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="imageBox = false" size="mini">取 消</el-button>
		    <el-button type="primary" @click="addImageCate" size="mini">确 定</el-button>
		  </div>
		</el-dialog>
		
		<!-- 编辑相册的弹框 -->
		<el-dialog title="编辑相册" :visible.sync="editPhotoBox">
		  <el-form :model="editPhoto">
		    <el-form-item label="相册名称" :label-width="`80px`">
		      <el-input v-model="editPhoto.name" placeholder="请输入相册名称"></el-input>
		    </el-form-item>
			<el-form-item label="相册排序" :label-width="`80px`">
			  <el-input-number v-model="editPhoto.order" :min="1" :max="10" label="描述文字"></el-input-number>
			</el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="editPhotoBox = false" size="mini">取 消</el-button>
		    <el-button type="primary" size="mini" @click="saveEditPhoto">保 存</el-button>
		  </div>
		</el-dialog>
		
		<!-- 上传图片的弹框 -->
		<el-dialog title="上传图片" :visible.sync="uploadBox" center @close="uploadImg">
			<div class="upload">
				<el-upload
				  class="upload-demo"
				  drag
				  :headers="{token:this.$store.state.token}"
				  action="/api/admin/image/upload"
				  name="img"
				  :data="{image_class_id:this.cid}"
				  multiple>
				  <i class="el-icon-upload"></i>
				  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				  <div class="el-upload__tip" slot="tip" style="text-align: center;">只能上传jpg/png文件，且不超过500kb</div>
				</el-upload>
			</div>
		</el-dialog>
		
		<!-- 编辑图片名称的弹框 -->
		<el-dialog title="编辑相册" :visible.sync="editImgNameBox" width="25%" center>
		  <div>请输入新名称</div>
		  <el-form :model="editImgName">
		    <el-form-item>
		      <el-input v-model="editImgName.name" placeholder="请输入相册名称"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="editImgNameBox = false" size="mini">取 消</el-button>
		    <el-button type="primary" size="mini" @click="saveEditImgName">保 存</el-button>
		  </div>
		</el-dialog>
		
		<!-- 图片放大的弹框 -->
		<el-dialog :visible.sync="maxImageBox">
			<img src="http://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/public/5fe43ec259c57.jpg" style="width: 100%;height: 500px;"  />
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props: [],
		components: {},
		data() {
			return {
				sort: "", // 排序 
				keyword: "", // 关键字
				cid: "", // 相册分类的id
				page: 1,
				limit: 12,
				totals: 0,
				total: 0,
				classList: [], // 相册分类的数据
				imageList: [], // 图片的数据
				// 创建相册必备参数
				photo: {
					name: "",
					order: 0,
				},
				imageBox: false, // 控制创建相册的弹框
				// 编辑相册必备参数
				editPhoto: {
					id: 0,
					name: "",
					order: 0,
				},
				editPhotoBox: false, // 控制编辑相册的弹框
				uploadBox: false, // 控制上传图片的弹框
				ids: [], // 选中图片id的数组
				editImgName: {
					id: 0,
					name: "",
				},
				editImgNameBox: false, // 编辑图片名称的弹框
				maxImageBox: false, // 控制图片放大的弹框
			};
		},
		created() {

		},
		mounted() {
			this.getImageClass();
		},
		methods: {
			// 获取图片分类的数据
			getImageClass() {
				this.$axios.get(`/api/admin/imageclass/${this.page}`).then(res => {
					console.log(res);
					this.classList = res.data.list;
					this.total = res.data.totalCount;
					this.cid = res.data.list[0].id;
					this.getImageList();
				}).catch(error => {
					this.$message.error(error.response.data.msg)
				})
			},
			// 获取图片列表的数据
			getImageList() {
				this.$axios.get(
					`/api/admin/imageclass/${this.cid}/image/${this.page}?limit=${this.limit}&order=${this.sort}&keyword=${this.keyword}`
				).then(res => {
					console.log(res);
					this.imageList = res.data.list;
					this.totals = res.data.totalCount;
				}).catch(error => {
					this.$message.error(error.response.data.msg)
				})
			},
			// 分页的操作
			changeSize(size) {
				this.limit = size;
				this.getImageList();
			},
			changePage(page) {
				this.page = page;
				this.getImageList();
			},
			// 创建图片分类的操作
			addImageCate() {
				this.$axios.post("/api/admin/imageclass",this.photo).then(res => {
					console.log(res)
					// 成功提示
					this.$message.success("创建成功");
					this.getImageClass();
					this.imageBox = false;
				}).catch(error => {
					this.$message.error(error.response.data.msg)
				})
			},
			// 点击左侧菜单栏进行切换图片
			changeLeft(id) {
				console.log(id);
				this.cid = id;
				this.page = 1;
				this.getImageList();
			},
			// 点击相册分类进行操作
			handleCommand(command) {
				console.log(command)
				if(command.type == "edit") {
					this.editPhotoBox = true;
					this.editPhoto = {
						id: command.obj.id,
						name: command.obj.name,
						order: command.obj.order
					}
				};
				if(command.type == "del") {
					this.$confirm("您确定要删除该相册吗?", "提示",{
						confirmButtonText: '确定',
					    cancelButtonText: '取消',
					    type: 'warning'
					}).then(() => {
						this.removePhoto(command.id);
					}).catch(() => {
						this.$message.error("您已经取消了删除的操作")
					})
				}
			},
			// 保存编辑好的相册
			saveEditPhoto() {
				this.$axios.post("/api/admin/imageclass/"+this.editPhoto.id, {
					name: this.editPhoto.name,
					order: this.editPhoto.order
				}).then(res => {
					console.log(res)
					this.editPhotoBox = false;
					// 成功提示
					this.$message.success("编辑成功");
					this.getImageClass();
				}).catch(error => {
					this.$message.error(error.response.data.msg)
				})
			},
			// 删除分类相册的操作
			removePhoto(id) {
				this.$axios.delete("/api/admin/imageclass/"+id, {
					name: this.editPhoto.name,
					order: this.editPhoto.order
				}).then(res => {
					this.$message.success("删除成功");
					this.getImageClass();
				}).catch(error => {
					this.$message.error(error.response.data.msg)
				})
			},
			// 上传图片的操作
			uploadImg() {
				// 成功提示
				this.$message.success("上传图片成功");
				this.getImageClass();
			},
			// 删除单张图片的操作
			removeImg(id) {
				this.$confirm("您确定要删除该相册吗?", "提示",{
					confirmButtonText: '确定',
				    cancelButtonText: '取消',
				    type: 'warning'
				}).then(() => {
					this.$axios.delete("/api/admin/image/"+id).then(res => {
						this.$message.success("删除成功");
						this.getImageClass();
					})
				}).catch(() => {
					this.$message.error("您已经取消了删除的操作")
				})
			},
			// 批量删除的操作
			selectRemove() {
				this.$confirm("您确定要删除该相册吗?", "提示",{
					confirmButtonText: '确定',
				    cancelButtonText: '取消',
				    type: 'warning'
				}).then(() => {
					this.$axios.post("/api/admin/image/delete_all",{ids: this.ids}).then(res => {
						this.$message.success("删除成功");
						this.getImageClass();
					}).catch(error => {
						this.$message.error(error.response.data.msg)
					})
				}).catch(() => {
					this.$message.error("您已经取消了删除的操作")
				})
			},
			// 修改图片名称的操作
			editImg(item) {
				this.editImgName = item;
				this.editImgNameBox = true;
			},
			// 保存编辑好的图片名称
			saveEditImgName() {
				this.$axios.post(`/api/admin/image/${this.editImgName.id}`, {name: this.editImgName.name}).then(res => {
					console.log(res);
					this.$message.success("修改成功");
					this.editImgNameBox = false;
				}).catch(error => {
					this.$message.error(error.response.data.msg)
				})
			}
		},
		computed: {

		},
		watch: {

		}
	};
</script>

<style lang="scss" scoped>
	.el-container {
		width: 100%;

		.el-header {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #F0F0F0;
			padding-top: 20px;
		}

		.el-aside {
			width: 100%;
			min-height: 500px;
			border: 1px solid #ddd;

			.el-menu {
				width: 100%;
				height: 572px;
				position: relative;
				border-right: none;
				.menuMsg {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.asidePage {
					width: 100%;
					background: #F0F0F0;
					position: absolute;
					bottom: 0px;
				}
			}
		}
		.el-main {
			width: 100%;
			.btnGroup {
				padding: 7px 10px !important;
			}
			.el-image {
				width: 100%;
				height: 150px;
			}
			.bottom {
				display: flex;
				justify-content: center;
			}
			.el-upload-dragger {
				width: 560px !important;
				height: 210px !important;
			}
			.imageName {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
				font-size: 13px;
			}
			.checkCart {
				position: relative;
				.checkBox {
					position: absolute;
					top: 0;
					right: 0;
				}
			}
		}
		.el-footer {
			width: 100%;
			display: flex;
			align-items: center;
			background: #F0F0F0;
		}
	}
	.upload {
		width: 100%;
		display: flex;
		justify-content: center;
	}
</style>
